<template>
  <div class="purchase-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>采购管理</span>
          <el-button type="primary" @click="handleAdd">新增采购</el-button>
        </div>
      </template>
      
      <el-table :data="purchaseList" v-loading="loading">
        <el-table-column prop="id" label="采购ID" width="100" />
        <el-table-column prop="deviceId" label="器械名称">
          <template #default="scope">
            {{ getDeviceName(scope.row.deviceId) }}
          </template>
        </el-table-column>
        <el-table-column prop="partName" label="采购零部件名称" />
        <el-table-column prop="quantity" label="数量" width="100" />
        <el-table-column prop="supplier" label="供应商" />
        <el-table-column prop="orderDate" label="采购日期" width="120" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ formData.status === 0 ? '未到货' : '已到货' }}

            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="formVisible" :title="formData.id ? '编辑采购' : '新增采购'" width="500px">
  <el-form :model="formData" label-width="100px">
    <el-form-item label="器械">
      <el-select v-model="formData.deviceId" placeholder="请选择器械" style="width: 100%">
        <el-option v-for="device in devices" :key="device.id" :label="device.deviceName" :value="device.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="零部件名称">
      <el-input v-model="formData.partName" />
    </el-form-item>
    <el-form-item label="数量">
      <el-input-number v-model="formData.quantity" :min="1" />
    </el-form-item>
    <el-form-item label="供应商">
      <el-input v-model="formData.supplier" />
    </el-form-item>
    <el-form-item label="采购日期">
      <el-date-picker v-model="formData.orderDate" type="date" placeholder="选择日期" style="width: 100%" />
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formData.status" placeholder="请选择状态" style="width: 100%">
        <el-option label="未到货" :value="0" />
        <el-option label="已到货" :value="1" />
      </el-select>
    </el-form-item>
  </el-form>
  <template #footer>
    <el-button @click="formVisible = false">取消</el-button>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </template>
</el-dialog>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {  list } from '@/api/device'
import * as purchaseApi from '@/api/purchase'

const loading = ref(false)
const purchaseList = ref([])
const devices = ref([])
const formVisible = ref(false)
const formData = ref({
  id: null,
  deviceId: '',
  partName: '',
  quantity: 1,
  supplier: '',
  orderDate: '',
  status: 0
})

// 新增
const handleAdd = () => {
  formData.value = {
    id: null,
    deviceId: '',
    partName: '',
    quantity: 1,
    supplier: '',
    orderDate: '',
    status: 0
  }
  formVisible.value = true
}

// 编辑
const handleEdit = (row) => {
  formData.value = { ...row }
  formVisible.value = true
}

// 提交表单
const submitForm = async () => {
  try {
    if (formData.value.id) {
      await purchaseApi.updatePurchase(formData.value)
    } else {
      await purchaseApi.addPurchase(formData.value)
    }
    formVisible.value = false
    fetchPurchases()
  } catch (error) {
    console.error('提交失败', error)
  }
}

// 获取设备数据
const fetchDevices = async () => {
  try {
    const res = await list()
    devices.value = res 
  } catch (error) {
    console.error('获取设备列表失败', error)
  }
}

// 获取采购数据
const fetchPurchases = async () => {
  loading.value = true
  try {
    const res = await purchaseApi.listPurchase()
    purchaseList.value = res 
  } catch (error) {
    console.error('获取采购列表失败', error)
  } finally {
    loading.value = false
  }
}

// 根据ID获取设备名称
const getDeviceName = (deviceId) => {
  const device = devices.value.find(item => item.id === deviceId)
  return device ? device.deviceName : deviceId
}

// 状态标签类型
const getStatusType = (status) => {
  const statusMap = {
    '待审核': 'warning',
    '已通过': 'success',
    '已拒绝': 'danger'
  }
  return statusMap[status] || 'info'
}

// 初始化数据
onMounted(() => {
  fetchDevices()
  fetchPurchases()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>